<template>
	<div class="myTask_list">
		<template v-if="$store.state.userInfo.teamId">
			<mu-list style="padding: 15px 10px 0;">
			    <mu-raised-button label="添加新任务" class="raised-button" style="height: 42px;"
			    	@click="addTaskOpen" backgroundColor="#a4c639" fullWidth/>
			</mu-list>

			<mu-list>
			    <mu-sub-header>30天内我发布的任务（待完成）</mu-sub-header>
			    <mu-list-item v-for="list in taskList" v-if="list.taskStatus < 2"
			    	:title="list.taskContent" @click="setTaskWindow(list.taskId)">
			    	<span class="typeCircle" :style="'background:' + $store.state.taskLevelColor[list.taskLevel]" slot="leftAvatar">
			    		{{$store.state.taskLevel[list.taskLevel]}}</span>
			    	<mu-icon value="check_circle" :color="$store.state.taskStatusColor[list.taskStatus]" slot="right"/>
			    	<label class="col_success">执行人：{{mobileToName(list.implement)}}</label>
			    	<label class="col_warning ml_10">审核人：{{mobileToName(list.examine)}}</label>
			    </mu-list-item>
			</mu-list>

			<mu-list>
			    <mu-sub-header>30天内我发布的任务（已完成）</mu-sub-header>
			    <mu-list-item v-for="list in taskList" v-if="list.taskStatus > 1"
			    	:title="list.taskContent" @click="setTaskWindow(list.taskId)">
			    	<span class="typeCircle" :style="'background:' + $store.state.taskLevelColor[list.taskLevel]" slot="leftAvatar">
			    		{{$store.state.taskLevel[list.taskLevel]}}</span>
			    	<mu-icon value="check_circle" :color="$store.state.taskStatusColor[list.taskStatus]" slot="right"/>
			    	<label class="col_success">执行人：{{mobileToName(list.implement)}}</label>
			    	<label class="col_warning ml_10">审核人：{{mobileToName(list.examine)}}</label>
			    </mu-list-item>
			</mu-list>


			<!-- 添加任务window -->
			<mu-dialog :open="addTaskDialog" title="添加新任务" @close="addTaskClose">
				<div style="text-align: left; overflow:hidden;">
					<mu-date-picker v-model="taskData.taskDate" label="任务截止时间" autoOk :minDate="curDate"/>
					<mu-select-field v-model="taskData.taskLevel" :labelFocusClass="['label-foucs']" label="任务紧急程度" :autoWidth="true">
					    <mu-menu-item v-for="(text, index) in taskData.taskLevelList" :key="index" :value="index" :title="text" />
					</mu-select-field>
					<mu-text-field v-model="taskData.taskContent" hintText="......" label="任务内容" multiLine :rows="1" :rowsMax="3"/>
					<mu-select-field v-model="taskData.implementType" :labelFocusClass="['label-foucs']" label="执行人" :autoWidth="true">
					    <mu-menu-item v-for="(text, index) in taskData.implement" :key="index" :value="index" :title="text.userName" />
					</mu-select-field>
					<mu-select-field v-model="taskData.examineType" :labelFocusClass="['label-foucs']" label="审核人" :autoWidth="true">
					    <mu-menu-item v-for="(text, index) in taskData.examine" :key="index" :value="index" :title="text.userName" />
					</mu-select-field>
				</div>
			    <mu-flat-button slot="actions" @click="addTaskSave" label="保存提交" primary/>
			</mu-dialog>
			<!-- 任务状态window -->
			<examine-dialog :openData="examineData"></examine-dialog>
			<alerts-dialog :alertData="alertDialog"></alerts-dialog>
		</template>
		
		<template v-else>
			<div class="noData">您必须先加入一个团队才可以使用本功能！</div>
		</template>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data(){
		return {
			alertDialog: {},
			//添加任务相关
			addTaskDialog: false,
			curDate: moment().format('YYYY-MM-DD'),
			taskData: {
				taskDate: moment().format('YYYY-MM-DD'),
	      		taskContent: '',
	      		taskLevelList: this.$store.state.taskLevel,
				taskLevel: 0,
	      		implement: [],
				implementType: 0,
	      		examine: [],
				examineType: 0,
			},
			//设置任务状态
			examineData: {},
			//任务列表
			taskList: [],
			userList: [],
			//监听审核事件
			examineListen: 0,
			interval: {}
		}
	},
	methods: {
		//添加新任务 - 弹窗
		addTaskOpen(tid){
			this.addTaskDialog = true;
			//任务初始化
			this.taskData.taskDate = this.curDate;
			this.taskData.taskContent = '';
			this.taskData.taskType = 0;
			this.taskData.implementType = 0;
			this.taskData.examineType = 0;
		},
		addTaskClose(){
			this.addTaskDialog = false;
		},
		addTaskSave(){	//保存任务
			let td = this.taskData,
				params = {
					taskId: new Date().getTime() + '',
					taskDate: td.taskDate,
		      		taskContent: td.taskContent,
		      		taskLevelList: td.taskLevelList[td.taskLevel],
					taskLevel: td.taskLevel,
		      		implement: td.implement[td.implementType].mobile,
		      		examine: td.examine[td.examineType].mobile,
		      		taskAdds: this.$store.state.userInfo.mobile,
		      		taskStatus: 0,
					oType: 'save'
				}
			if(!params.taskContent){
				this.alertDialog = {
					openState: true,
					content: '任务内容不能为空！'
				}
				return false;
			}
			if(params.implement === params.examine){
				this.alertDialog = {
					openState: true,
					content: '任务执行人与审核人不能相同，请修改！'
				}
				return false;
			}

			axios.post($base + 'task/taskSave', params).then(json => {
				this.alertDialog = {
					openState: true,
					content: '添加成功！'
				}
				this.addTaskClose();
				this.getTaskList30();
			}).catch(json => {

			})
		},
		//设置任务状态
		setTaskWindow(tid){	//任务弹窗
			this.examineData = {
				openState: true,
				btnOk: true,
				btnExamine: true,
				btnDanger: true,
				btnEdit: true,
				btnDel: true,
				tid: tid
			};
		},
		taskStatusClose(){	//任务关闭
			this.taskStateDialog = false;
		},
		//获取所有成员列表
		getUserList(){
			this.userList = this.$store.state.userList
			this.userList.forEach(e => {
				this.taskData.implement.push({
					userName: e.userName,
					mobile: e.mobile
				})
				this.taskData.examine.push({
					userName: e.userName,
					mobile: e.mobile
				})
			})
		},
		//获取30天内我发布的任务
		getTaskList30(){
			let params = {
					taskAdds: this.$store.state.userInfo.mobile,
					days: 30
				};

			axios.post($base + 'task/getTaskList', params).then(json => {
				this.taskList = json.data;
			}).catch(json => {
				console.log('error')
			})
		},
		//通过手机获取用户名
		mobileToName(mobile){
			let name = '';
			this.userList.map(list => {
				if(list.mobile == mobile){
					name = list.userName;
				}
			})
			return name;
		}
	},
	mounted(){
		let me = this;
		if(this.$store.state.userInfo.teamId){
			this.getUserList();
			this.getTaskList30();
			this.interval = setInterval(function(){
				me.examineListen = me.$store.state.examineListen;
			}, 500)
		}
	},
	watch: {
		examineListen(data){
			this.getTaskList30();
		}
	},
	destroyed(){
		clearInterval(this.interval);
	}
}
</script>